import { Button, Card, Space, List, Form, Tag, message } from "antd";
import { useState } from "react"
import { min_app_shell } from '@linksaas-minapp/api';
import AnalyseListModal from "@/components/AnalyseListModal";
import { AnalyseList } from "@/components/analyse";
import IssueList from "@/components/IssueList";
import { writeText } from '@tauri-apps/api/clipboard';

export default function Home() {

  const [flagList, setFlatList] = useState<string[]>([]);
  const [showModal, setShowModal] = useState(false);

  return (
    <Card title="infer助手" extra={
      <Space>
        <Button type="link" onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          min_app_shell.openBrowser("https://fbinfer.com/");
        }}>官方网站</Button>
        <Button onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          setShowModal(true);
        }}>增加分析器</Button>
      </Space>
    }>
      <List rowKey="flag" dataSource={AnalyseList.filter(item => flagList.includes(item.flag))} renderItem={item => (
        <Card title={<span>{item.nameEn}({item.nameCn})</span>} style={{ marginBottom: "10px" }} extra={
          <Button onClick={e => {
            e.stopPropagation();
            e.preventDefault();
            setFlatList(flagList.filter(flag => flag != item.flag));
          }}>移除分析器</Button>
        }>
          <Form>
            <Form.Item label="支持语言">
              {item.langC == true && <Tag>C/C++/ObjC</Tag>}
              {item.langJava == true && <Tag>Java</Tag>}
              {item.langDotNet == true && <Tag>C#/.Net</Tag>}
            </Form.Item>
          </Form>
          <p>{item.descCn}</p>
          <p>{item.descEn}</p>
          <h3>相关问题:</h3>
          <IssueList issueList={item.issueList} />
        </Card>
      )} />
      <Card title="命令行" extra={<Button type="primary" onClick={e => {
        e.stopPropagation();
        e.preventDefault();
        writeText(`infer run ${flagList.join(" ")} -- `).then(() => {
          message.info("复制成功");
        });
      }}>复制</Button>}>
        <pre>
          infer run {`${flagList.join(" ")}`} -- [你的程序构建命令]
        </pre>
      </Card>

      {showModal == true && (
        <AnalyseListModal flagList={flagList} onCancel={() => setShowModal(false)} onSelect={flag => {
          if (!flagList.includes(flag)) {
            let tmpList = flagList.slice();
            tmpList.push(flag);
            setFlatList(tmpList);
          }
          setShowModal(false);
        }} />
      )}
    </Card>
  )
}
